<script setup lang="ts">
import { defineEmits } from "vue";
const props = defineProps({
  lists: {
    type: Array,
    default: () => []
  },
  show: {
    type: Boolean,
    default: false
  }
});
const actions = !props.show
  ? [
      {
        label: "操作",
        slot: "action",
        width: "60px"
      }
    ]
  : [];
const columns = [
  {
    label: "序号",
    slot: "index",
    width: "80px"
  },
  {
    label: "主题",
    slot: "title",
    width: "260px"
  },
  {
    label: "总结内容",
    slot: "content"
  },
  ...actions
];
const $emit = defineEmits(["delClick"]);
const deletes = index => {
  const list = props.lists;
  list.splice(index, 1);
  $emit("delClick", list);
};
</script>

<template>
  <pure-table
    :data="props.lists"
    :columns="columns"
    stripe
    border
    :header-cell-style="{
      textAlign: 'center',
      background: '#f5f7fa'
    }"
  >
    <template #index="{ row, column, index }">
      {{ index + 1 }}
    </template>
    <template #title="{ row }">
      <el-input
        v-model="row.title"
        placeholder="请填写总结主题"
        :autosize="{ minRows: 2, maxRows: 4 }"
        maxlength="20"
        show-word-limit
        type="textarea"
        v-if="!props.show"
      ></el-input>
      <el-text class="mx-1" v-else>{{ row.title }}</el-text>
    </template>
    <template #content="{ row }">
      <el-input
        v-model="row.content"
        placeholder="请填写总结内容"
        :autosize="{ minRows: 2, maxRows: 4 }"
        maxlength="500"
        show-word-limit
        type="textarea"
        v-if="!props.show"
      ></el-input>
      <el-text class="mx-1" v-else>{{ row.content }}</el-text>
    </template>
    <template #action="{ row, index }" v-if="!props.show">
      <el-button type="primary" size="small" link @click="deletes(index)"
        >删除</el-button
      >
    </template>
  </pure-table>
</template>

<style lang="scss" scoped></style>
